<template>
  <div class="nav">
    <a-row
      class="nav-header xs-hidden"
      type="flex"
      justify="center"
      align="middle"
    >
      <a-col :span="13">
        <weather />
      </a-col>
      <a-col :xs="24" :sm="4">
        <account />
      </a-col>
    </a-row>
    <a-row type="flex" justify="center" align="middle">
      <a-col :xs="23" :sm="18" :md="14" :lg="12">
        <search-box style="margin: 20px auto"></search-box>
      </a-col>
    </a-row>

    <a-row type="flex" justify="center" align="middle">
      <a-col :xs="23" :sm="23" :md="22" :lg="20">
        <link-box
          :links="links"
          :searchable="true"
          :editable="true"
          :draggable="true"
        />
      </a-col>
    </a-row>

    <a-row type="flex" justify="center" align="middle">
      <a-col :xs="23" :sm="23" :md="22" :lg="20">
        <link-box :links="oriLinks" />
      </a-col>
    </a-row>

    <div class="footer flex-box pos-fix color-black">
      {{ config.company }} &nbsp;&nbsp;
      <template v-if="config.gongan">
        <img style="width: 16px;margin-right: 6px" :src="policeImg" alt="" srcset="" />
        <a
          href="https://beian.mps.gov.cn/#/query/webSearch?code=32010602011337"
          target="_blank"
          class="color-black"
          >{{ config.gongan }}</a
        >
        &nbsp;&nbsp; | &nbsp;&nbsp;
      </template>
      <a
        href="https://beian.miit.gov.cn/"
        target="_blank"
        class="color-black"
        >{{ config.beian }}</a
      >
    </div>
  </div>
</template>

<script>
import Weather from "./weather";
import Account from "./account";
import SearchBox from "./search-box";
import LinkBox from "./link-box";
import config from "@/json/init.json";
import { mapState } from "vuex";

export default {
  components: {
    Weather,
    Account,
    SearchBox,
    LinkBox,
  },
  data() {
    return {
      config,
      oriLinks: config.links,
      policeImg: require("@/assets/images/police.png"),
    };
  },
  computed: {
    ...mapState(["links"]),
  },
};
</script>

<style lang="less">
.nav {
  padding-bottom: 88px;
}

.footer {
  font-size: 14px;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 44px;
  background: rgba(255, 255, 255, 0.72);
}
</style>
